<template>
    <el-form class="enterprise_step1" ref="formRef" :rules="rules" :model="form" scroll-to-error label-width="auto">
        <div class="grid_box">
            <div class="grid_left">
                <el-form-item label="企业名称" prop="merchantName">
                    <el-input v-model.trim="form.merchantName" maxlength="50" show-word-limit />
                </el-form-item>
                <el-form-item label="企业地址" prop="merchantAddress">
                    <el-input maxlength="40" v-model.trim="form.merchantAddress" show-word-limit />
                </el-form-item>
                <el-form-item label="统一社会信用代码" prop="regNo">
                    <el-input v-model.trim="form.regNo" maxlength="20" show-word-limit />
                </el-form-item>
                <el-form-item label="注册资本" prop="regCapital">
                    <el-input v-model.number="form.regCapital" maxlength="20" show-word-limit />
                </el-form-item>
                <el-form-item label="申请邮箱" prop="email">
                    <el-input maxlength="40" v-model.trim="form.email" show-word-limit />
                </el-form-item>
                <el-form-item label="开户名称" prop="cardName">
                    <el-input v-model.trim="form.cardName" maxlength="50" show-word-limit />
                </el-form-item>
                <el-form-item label="开户银行" prop="bankName">
                    <el-input v-model.trim="form.bankName" maxlength="20" show-word-limit />
                </el-form-item>
                <el-form-item label="开户银行所在省" prop="provinceName">
                    <el-select v-model="form.provinceName" @change="provinceChangeHandle" placeholder="选择省">
                        <el-option
                            v-for="item in provinceOptions"
                            :key="item.code"
                            :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="开户银行所在市" prop="cityName">
                    <el-select v-model="form.cityName" placeholder="选择市" no-data-text="请选择省">
                        <el-option v-for="item in cityOptions" :key="item.city" :label="item.name" :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="开户银行支行名称" prop="branchName">
                    <el-input v-model.trim="form.branchName" maxlength="20" show-word-limit />
                </el-form-item>
                <el-form-item label="企业对公账号" prop="cardNo">
                    <el-input v-model.trim="form.cardNo" maxlength="20" show-word-limit />
                </el-form-item>
            </div>
            <div class="grid_right">
                <el-form-item label="法人姓名" prop="corporateName">
                    <el-input v-model.trim="form.corporateName" maxlength="20" show-word-limit />
                </el-form-item>
                <el-form-item label="法人身份证号" prop="corporateIdCard">
                    <el-input v-model.trim="form.corporateIdCard" maxlength="20" show-word-limit />
                </el-form-item>
                <el-form-item label="联系人手机号" prop="contactMobile">
                    <el-input v-model.trim="form.contactMobile" maxlength="20" show-word-limit />
                </el-form-item>
                <el-form-item label="经营范围" prop="businessScope" class="mb25">
                    <el-input
                        maxlength="140"
                        v-model.trim="form.businessScope"
                        type="textarea"
                        :rows="9"
                        resize="none"
                        show-word-limit />
                </el-form-item>
                <el-form-item label="填写人是否法人" prop="proposer">
                    <el-radio-group v-model="form.proposer">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="form.proposer === 2">
                    <el-form-item label="代理人姓名" prop="agentName">
                        <el-input v-model.trim="form.agentName" maxlength="20" show-word-limit />
                    </el-form-item>
                    <el-form-item label="代理人身份证号" prop="agentIdCard">
                        <el-input v-model.trim="form.agentIdCard" maxlength="20" show-word-limit />
                    </el-form-item>
                </template>
            </div>
        </div>
        <div class="divider"></div>
        <div class="grid_box">
            <div class="grid_left">
                <el-form-item label="受益人是实际控制人" prop="inBenefit">
                    <el-radio-group v-model="form.inBenefit">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="form.inBenefit === 2">
                    <el-form-item label="受益人类型" prop="beneficiaryType">
                        <el-radio-group v-model="form.beneficiaryType">
                            <el-radio :label="2">个人</el-radio>
                            <el-radio :label="1">企业</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- 受益人类型----个人 -->
                    <template v-if="form.beneficiaryType === 2">
                        <el-form-item label="受益人归属地" prop="beneficiaryArea">
                            <el-input v-model.trim="form.beneficiaryArea" maxlength="20" show-word-limit />
                        </el-form-item>
                        <el-form-item label="受益人姓名" prop="beneficiaryName">
                            <el-input v-model.trim="form.beneficiaryName" maxlength="20" show-word-limit />
                        </el-form-item>
                        <el-form-item label="受益人身份证号" prop="beneficiaryIdCard">
                            <el-input v-model.trim="form.beneficiaryIdCard" maxlength="20" show-word-limit />
                        </el-form-item>
                        <el-form-item label="受益人身份证有效期" prop="beneficiaryIdCardExpireDate">
                            <div class="date_checkbox">
                                <el-date-picker
                                    v-model="form.beneficiaryIdCardExpireDate"
                                    type="date"
                                    placeholder="年/月/日"
                                    value-format="YYYY-MM-DD"
                                    style="width: 100%"
                                    :disabled="form.beneficiaryIdCardExtended === 1" />
                                <el-checkbox
                                    v-model="form.beneficiaryIdCardExtended"
                                    :true-label="1"
                                    :false-label="2"
                                    label="长期有效" />
                            </div>
                        </el-form-item>
                    </template>
                    <!-- 受益人类型----企业 -->
                    <template v-else>
                        <el-form-item label="受益人企业名称" prop="beneficiaryCompanyName">
                            <el-input v-model.trim="form.beneficiaryCompanyName" maxlength="50" show-word-limit />
                        </el-form-item>
                        <el-form-item label="受益人社会信用代码（注册号）" prop="beneficiaryRegNo">
                            <el-input v-model.trim="form.beneficiaryRegNo" maxlength="20" show-word-limit />
                        </el-form-item>
                        <el-form-item label="受益人营业有效期" prop="beneficiaryBusinessExpireDate">
                            <div class="date_checkbox">
                                <el-date-picker
                                    v-model="form.beneficiaryBusinessExpireDate"
                                    type="date"
                                    placeholder="年/月/日"
                                    value-format="YYYY-MM-DD"
                                    style="width: 100%"
                                    :disabled="form.beneficiaryBusinessExtended === 1" />
                                <el-checkbox
                                    v-model="form.beneficiaryBusinessExtended"
                                    :true-label="1"
                                    :false-label="2"
                                    label="长期有效" />
                            </div>
                        </el-form-item>
                    </template>
                </template>
                <el-form-item label="法人是实际控制人" prop="inControl">
                    <el-radio-group v-model="form.inControl">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="form.inControl === 2">
                    <el-form-item label="实际控制人类型" prop="controllerType">
                        <el-radio-group v-model="form.controllerType">
                            <el-radio :label="2">个人</el-radio>
                            <el-radio :label="1">企业</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- 实际控制人类型----个人 -->
                    <template v-if="form.controllerType === 2">
                        <el-form-item label="实际控制人归属地" prop="controllerArea">
                            <el-input v-model.trim="form.controllerArea" maxlength="20" show-word-limit />
                        </el-form-item>
                        <el-form-item label="实际控制人姓名" prop="controllerName">
                            <el-input v-model.trim="form.controllerName" maxlength="20" show-word-limit />
                        </el-form-item>
                        <el-form-item label="实际控制人身份证号" prop="controllerIdCard">
                            <el-input v-model.trim="form.controllerIdCard" maxlength="20" show-word-limit />
                        </el-form-item>
                        <el-form-item label="实际控制人身份证有效期" prop="controllerIdCardExpireDate">
                            <div class="date_checkbox">
                                <el-date-picker
                                    v-model="form.controllerIdCardExpireDate"
                                    type="date"
                                    placeholder="年/月/日"
                                    value-format="YYYY-MM-DD"
                                    style="width: 100%"
                                    :disabled="form.controllerIdCardExtended === 1" />
                                <el-checkbox
                                    v-model="form.controllerIdCardExtended"
                                    :true-label="1"
                                    :false-label="2"
                                    label="长期有效" />
                            </div>
                        </el-form-item>
                    </template>
                    <!-- 实际控制人类型----企业 -->
                    <template v-else>
                        <el-form-item label="实际控制人企业名称" prop="controllerCompanyName">
                            <el-input v-model.trim="form.controllerCompanyName" maxlength="50" show-word-limit />
                        </el-form-item>
                        <el-form-item label="实际控制人社会信用代码（注册号）" prop="controllerRegNo">
                            <el-input v-model.trim="form.controllerRegNo" maxlength="20" show-word-limit />
                        </el-form-item>
                        <el-form-item label="实际控制人营业有效期" prop="controllerBusinessExpireDate">
                            <div class="date_checkbox">
                                <el-date-picker
                                    v-model="form.controllerBusinessExpireDate"
                                    type="date"
                                    placeholder="年/月/日"
                                    value-format="YYYY-MM-DD"
                                    style="width: 100%"
                                    :disabled="form.controllerBusinessExtended === 1" />
                                <el-checkbox
                                    v-model="form.controllerBusinessExtended"
                                    :true-label="1"
                                    :false-label="2"
                                    label="长期有效" />
                            </div>
                        </el-form-item>
                    </template>
                </template>
            </div>
        </div>
        <div class="footer">
            <el-button @click="submitHandle" type="primary">确认无误，申请开户</el-button>
        </div>
    </el-form>
</template>
<script setup>
import request from '@/request';
import provinceOptions from '@/assets/json/city.json';
import { getRegExp, throttle, cloneDeep } from '@/commons/utils';

import { ElLoading, ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';

const props = defineProps({
    query: { type: Object, default: () => ({}) }
});
const emit = defineEmits(['apply']);
const formRef = ref(null);

const form = reactive({
    shopId: props.query.shopId,
    /* ------------left------------ */
    //账户类型新加的  账户类型 1 企业账户 2 个体账户 3 个人账户
    accountType: 1,
    //企业名称
    merchantName: '',
    //企业地址
    merchantAddress: '',
    //社会信用代码
    regNo: '',
    //注册资本(单位：元)
    regCapital: '',
    //申请邮箱:用于接收注册邮件
    email: '',
    //开户名称
    cardName: '',
    //开户银行
    bankName: '',
    //开户银行所在省
    provinceName: '',
    //开户银行所在市
    cityName: '',
    //开户银行支行名称
    branchName: '',
    //企业对公账号
    cardNo: '',
    //受益人是否实际控制人:2-否 1-是
    inBenefit: 1,
    //受益人类型:inBenefit为2时填写;2个人 1-企业
    beneficiaryType: 2,

    /* -----------受益人----个人----------- */
    //受益人归属地beneficiaryType为2时填写
    beneficiaryArea: '',
    //受益人姓名 beneficiaryType为2时填写
    beneficiaryName: '',
    //受益人身份证号:beneficiaryType为2时填写
    beneficiaryIdCard: '',
    //受益人身份证是否长期 beneficiaryType为2时填写；2-否 1-是
    beneficiaryIdCardExtended: 2,
    //受益人身份证有效期限beneficiaryType为2时填写，格式：yyyy-MM-hh;如果受益人身份证有效期限为长期，请设置为2099-12-31
    beneficiaryIdCardExpireDate: '',

    /* -----------受益人----企业----------- */
    //受益人企业名称 beneficiaryType为1时填写
    beneficiaryCompanyName: '',
    //受益人社会信用代码(注册号) beneficiaryType为1时填写
    beneficiaryRegNo: '',
    //受益人营业期限是否长期 beneficiaryType为1时填写；2-否 1-是
    beneficiaryBusinessExtended: 2,
    //受益人营业有效期限 格式：yyyy-MM-hh;如果受益人营业有效期限为长期，请设置为2099-12-31
    beneficiaryBusinessExpireDate: '',

    //法人是否实际控制人:t2-否 1-是
    inControl: 1,
    //实际控制人类型 inControl为0时填写;2-个人 1-企业
    controllerType: 2,

    /* -----------实际控制人----个人----------- */
    //实际控制人归属地 controllerType为2时填写
    controllerArea: '',
    //实际控制人姓名 controllerType为2时填写
    controllerName: '',
    //实际控制人身份证号 controllerType为2时填写
    controllerIdCard: '',
    //实际控制人身份证是否长期controllerType为2时填写；2-否 1-是
    controllerIdCardExtended: 2,
    //实际控制人身份证有效期限格式：yyyy-MM-hh;如果实际控制人身份证有效期限为长期，请设置为2099-12-31
    controllerIdCardExpireDate: '',

    /* -----------实际控制人----企业----------- */
    //实际控制人企业名称;controllerType为1时填写
    controllerCompanyName: '',
    //实际控制人社会信用代码(注册号) controllerType为1时填写
    controllerRegNo: '',
    //实际控制人营业期限是否长期 controllerType为1时填写；2-否 1-是
    controllerBusinessExtended: '',
    //实际控制人营业有效期限,controllerType为1时填写，格式：yy
    controllerBusinessExpireDate: '',

    /* ------------right------------ */
    //法人姓名
    corporateName: '',
    //法人身份证号
    corporateIdCard: '',
    //联系人手机号
    contactMobile: '',
    //经营范围
    businessScope: '',
    //填写人是否法人:2-否 1-是
    proposer: 2,
    //代理人姓名:proposer为2时填写
    agentName: '',
    //代理人身份证号
    agentIdCard: ''
});

const rules = {
    // left
    merchantName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
    merchantAddress: [{ required: true, message: '请输入企业地址', trigger: 'blur' }],
    regNo: [
        { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
        { pattern: getRegExp('creditCode'), message: '统一社会信用代码格式不正确', trigger: 'blur' }
    ],
    regCapital: [
        { required: true, message: '请输入注册资本', trigger: 'blur' },
        { pattern: getRegExp('money'), message: '注册资本格式不正确', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入申请邮箱', trigger: 'blur' },
        { pattern: getRegExp('email'), message: '邮箱格式不正确', trigger: 'blur' }
    ],
    cardName: [{ required: true, message: '请输入开户名称', trigger: 'blur' }],
    bankName: [
        { required: true, message: '请输入开户银行', trigger: 'blur' },
        { pattern: getRegExp('chinese'), message: '只能输入中文', trigger: 'blur' }
    ],
    provinceName: [{ required: true, message: '请选择开户银行所在省', trigger: 'change' }],
    cityName: [{ required: true, message: '请选择开户银行所在市', trigger: 'change' }],
    branchName: [
        { required: true, message: '请输入开户银行支行名称', trigger: 'blur' },
        { pattern: getRegExp('chinese'), message: '只能输入中文', trigger: 'blur' }
    ],
    cardNo: [
        { required: true, message: '请输入企业对公账号', trigger: 'blur' },
        { pattern: getRegExp('bankcard'), message: '企业对公账号格式不正确', trigger: 'blur' }
    ],
    inBenefit: [{ required: true, message: '请选择受益人是否实际控制人', trigger: 'change' }],
    beneficiaryType: [{ required: true, message: '请选择受益人类型', trigger: 'change' }],
    // 个人
    beneficiaryArea: [{ required: true, message: '请输入受益人归属地', trigger: 'blur' }],
    beneficiaryName: [{ required: true, message: '请输入受益人姓名', trigger: 'blur' }],
    beneficiaryIdCard: [
        { required: true, message: '请输入受益人身份证号', trigger: 'blur' },
        { pattern: getRegExp('idcard'), message: '受益人身份证号格式不正确', trigger: 'blur' }
    ],
    // 企业
    beneficiaryCompanyName: [{ required: true, message: '请输入受益人企业名称', trigger: 'blur' }],
    beneficiaryRegNo: [
        { required: true, message: '请输入受益人社会信用代码（注册号）', trigger: 'blur' },
        { pattern: getRegExp('creditCode'), message: '受益人社会信用代码（注册号）格式不正确', trigger: 'blur' }
    ],
    beneficiaryIdCardExpireDate: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (form.beneficiaryIdCardExtended === 1) {
                    form.beneficiaryIdCardExpireDate = '';
                    callback();
                } else if (value) {
                    callback();
                } else {
                    callback(new Error('请选择受益人身份证有效期'));
                }
            },
            trigger: 'change'
        }
    ],
    beneficiaryBusinessExpireDate: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (form.beneficiaryBusinessExtended === 1) {
                    form.beneficiaryBusinessExpireDate = '';
                    callback();
                } else if (value) {
                    callback();
                } else {
                    callback(new Error('请选择受益人营业有效期'));
                }
            },
            trigger: 'change'
        }
    ],
    inControl: [{ required: true, message: '请选择法人是否实际控制人', trigger: 'change' }],
    controllerType: [{ required: true, message: '请选择实际控制人类型', trigger: 'change' }],
    // 个人
    controllerArea: [{ required: true, message: '请输入实际控制人归属地', trigger: 'blur' }],
    controllerName: [{ required: true, message: '请输入实际控制人姓名', trigger: 'blur' }],
    controllerIdCard: [
        { required: true, message: '请输入实际控制人身份证号', trigger: 'blur' },
        { pattern: getRegExp('idcard'), message: '实际控制人身份证号格式不正确', trigger: 'blur' }
    ],
    controllerIdCardExpireDate: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (form.controllerIdCardExtended === 1) {
                    form.controllerIdCardExpireDate = '';
                    callback();
                } else if (value) {
                    callback();
                } else {
                    callback(new Error('请选择实际控制人身份证有效期'));
                }
            },
            trigger: 'change'
        }
    ],
    // 企业
    controllerCompanyName: [{ required: true, message: '请输入实际控制人企业名称', trigger: 'blur' }],
    controllerRegNo: [
        { required: true, message: '请输入实际控制人社会信用代码（注册号）', trigger: 'blur' },
        { pattern: getRegExp('creditCode'), message: '实际控制人社会信用代码（注册号）格式不正确', trigger: 'blur' }
    ],
    controllerBusinessExpireDate: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (form.controllerBusinessExtended === 1) {
                    form.controllerBusinessExpireDate = '';
                    callback();
                } else if (value) {
                    callback();
                } else {
                    callback(new Error('请选择实际控制人营业有效期'));
                }
            },
            trigger: 'change'
        }
    ],
    // right
    corporateName: [
        { required: true, message: '请输入法人姓名', trigger: 'blur' },
        { pattern: getRegExp('chinese'), message: '只能输入中文', trigger: 'blur' }
    ],
    corporateIdCard: [
        { required: true, message: '请输入法人身份证号', trigger: 'blur' },
        { pattern: getRegExp('idcard'), message: '法人身份证格式不正确', trigger: 'blur' }
    ],
    contactMobile: [
        { required: true, message: '请输入联系人手机号', trigger: 'blur' },
        { pattern: getRegExp('phone'), message: '联系人手机号格式不正确', trigger: 'blur' }
    ],
    businessScope: [{ required: true, message: '请输入经营范围', trigger: 'blur' }],
    proposer: [{ required: true, message: '请选择填写人是否是法人', trigger: 'change' }],
    agentName: [
        { required: true, message: '请输入代理人姓名', trigger: 'blur' },
        { pattern: getRegExp('chinese'), message: '只能输入中文', trigger: 'blur' }
    ],
    agentIdCard: [
        { required: true, message: '请输入代理人身份证号', trigger: 'blur' },
        { pattern: getRegExp('idcard'), message: '代理人身份证格式不正确', trigger: 'blur' }
    ]
};

// 市列表
const cityOptions = ref([]);
// 选择省
const provinceChangeHandle = v => {
    form.cityName = '';
    cityOptions.value = provinceOptions.find(item => item.name === v).children;
};
let loading = null;

// 入参格式化
const paramFormatHandle = () => {
    const newForm = cloneDeep(form);
    const deleteObjectKey = arr => {
        arr.forEach(key => delete newForm[key]);
    };
    // 受益人是实际控制人时，企业/个人相关字段不传
    if (newForm.inBenefit === 1) {
        deleteObjectKey([
            'beneficiaryType',
            'beneficiaryArea',
            'beneficiaryName',
            'beneficiaryIdCard',
            'beneficiaryIdCardExtended',
            'beneficiaryIdCardExpireDate',
            'beneficiaryCompanyName',
            'beneficiaryRegNo',
            'beneficiaryBusinessExtended',
            'beneficiaryBusinessExpireDate'
        ]);
    }
    // 法人是实际控制人时，企业/个人相关字段不传
    if (newForm.inControl === 1) {
        deleteObjectKey([
            'controllerType',
            'controllerArea',
            'controllerName',
            'controllerIdCard',
            'controllerIdCardExtended',
            'controllerIdCardExpireDate',
            'controllerCompanyName',
            'controllerRegNo',
            'controllerBusinessExtended',
            'controllerBusinessExpireDate'
        ]);
    }
    // 填写人是法人时，下面字段不传
    if (newForm.proposer === 1) {
        deleteObjectKey(['agentName', 'agentIdCard']);
    }
    // 受益人为企业，删除个人相关字段
    if (newForm.beneficiaryType === 1) {
        deleteObjectKey([
            'beneficiaryArea',
            'beneficiaryName',
            'beneficiaryIdCard',
            'beneficiaryIdCardExtended',
            'beneficiaryIdCardExpireDate'
        ]);
    }
    // 受益人为个人，删除企业相关字段
    if (newForm.beneficiaryType === 2) {
        deleteObjectKey([
            'beneficiaryCompanyName',
            'beneficiaryRegNo',
            'beneficiaryBusinessExtended',
            'beneficiaryBusinessExpireDate'
        ]);
    }
    // 实际控制人为企业，删除个人相关字段
    if (newForm.controllerType === 1) {
        deleteObjectKey([
            'controllerArea',
            'controllerName',
            'controllerIdCard',
            'controllerIdCardExtended',
            'controllerIdCardExpireDate'
        ]);
    }
    // 实际控制人为个人，删除企业相关字段
    if (newForm.controllerType === 2) {
        deleteObjectKey([
            'controllerCompanyName',
            'controllerRegNo',
            'controllerBusinessExtended',
            'controllerBusinessExpireDate'
        ]);
    }
    const dateMap = {
        beneficiaryIdCardExtended: 'beneficiaryIdCardExpireDate',
        beneficiaryBusinessExtended: 'beneficiaryBusinessExpireDate',
        controllerIdCardExtended: 'controllerIdCardExpireDate',
        controllerBusinessExtended: 'controllerBusinessExpireDate'
    };
    // 有效期转为长期
    for (const [key, value] of Object.entries(dateMap)) {
        if (newForm[key] === 1) {
            newForm[key] = '1';
            newForm[value] = '2099-12-31';
        }
        if (newForm[key] === 2) {
            newForm[key] = '2';
        }
    }

    return newForm;
};
// 轮询状态结果
const statusResultHandle = login_no => {
    setTimeout(async () => {
        const { code, data, msg } = await request('baofuAccountInfoServ', { login_no });
        if (code === 0) {
            if (data.account_status != 1) {
                loading.close();
                emit('apply', data);
            } else {
                statusResultHandle(login_no);
            }
        } else {
            loading.close();
            ElMessage.error(msg);
        }
    }, 3000);
};

const submitHandle = throttle(async () => {
    await formRef.value.validate();
    loading = ElLoading.service({
        lock: true,
        text: '开户申请中',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    const params = paramFormatHandle();
    const { data, code, msg } = await request('baofuRegServ', params);
    if (code === 0) {
        // 设置浏览器 URL 地址参数
        const url = `${location.pathname}?no=${data.login_no}`;
        history.replaceState(null, document.title, url);
        // 轮询状态结果
        statusResultHandle(data.login_no);
    } else {
        loading.close();
        ElMessage.error(msg);
    }
});
</script>
<style lang="scss">
.enterprise_step1 {
    .grid_box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .grid_left,
        .grid_right {
            .el-form-item {
                margin-bottom: 24px;
                .el-input,
                .el-textarea,
                .el-input__wrapper {
                    max-width: 460px;
                    width: 100%;
                }
            }
            .date_checkbox {
                flex: 1;
                min-width: calc(100% + 116px);
                display: flex;
                .el-checkbox {
                    margin-left: 36px;
                    .el-checkbox__input {
                        .el-checkbox__inner {
                            width: 16px;
                            height: 16px;
                            border-radius: 50%;
                            &::after {
                                width: 4px;
                                height: 8px;
                                left: 5px;
                                top: 2px;
                            }
                        }
                    }
                    .el-checkbox__label {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                    }
                }
            }
        }
    }
    .divider {
        height: 1px;
        margin-bottom: 15px;
        background: #eaeaea;
    }
    .footer {
        text-align: center;
        margin-top: 30px;
        margin-bottom: 20px;
    }
}
</style>
